<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一次使用 BaiduTemplate</title>
    <!-- 引入 baiduTemplate -->
    <script src="./baiduTemplate-1.0.6.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <!-- 1、定义渲染节点 开始 -->
    <ol id="drawing-node"></ol>
    <!-- 定义渲染节点 结束 -->
    <button id="load_more">加载更多...</button>
    <!-- 2、定义模板 开始 -->
    <script id="t:for-in-data" type="text/html">
        <!-- BaiduTemplate 语法学习-if-for 语句 -->
        <% if(data_list){ %>
            <!-- for-in 循环数据 -->
            <% for(var key in data_list){ %>
                <li><%= data_list[key].title %></li>
            <% } %>
        <% } %>
    </script>
    <!-- 定义模板 结束 -->
    <script>
        $(function(){
            // console.log('jQuery 测试.');
            // 3、渲染模板 开始
            // 3-1、定义模板数据
            var data={
                "data_list":[
                    {title:"Zig"},
                    {title:"Y-es"},
                    {title:"Xbox"},
                ],
            }
            // 3-2、实例模板空间
            var bt=baidu.template;
            // 3-3、生成 HTML 模板字符串
            var html=bt('t:for-in-data',data);
            // 3-4、在模板节点 渲染 DOM
            $("#drawing-node").html(html);
            // 渲染模板 结束
            // 加载更多 开始
            $("#load_more").click(function(){
                console.log('加载更多...');
                $.ajax({
                    url:'../data_list.php',
                    type:'get',
                    success:function(back){
                        var result=back.data;
                        var info=back.info;
                        data.data_list=result;
                        // 生成 HTML
                        var html=bt('t:for-in-data',data);
                        // 渲染
                        $("#drawing-node").append(html);
                        console.log(info);
                    },
                    error:function(){
                        console.log('网络不稳定，加载失败...');
                    },
                });
            });
            // 加载更多 结束
    });
    </script>
</body>
</html>